<template>
  <div class="min-h-screen gradient-bg flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full">
      <div class="login-card rounded-2xl p-8">
        <div class="text-center">
          <i class="fas fa-paw text-6xl text-indigo-600 mb-4"></i>
          <h2 class="text-3xl font-extrabold text-gray-900 mb-8">
            注册账号
          </h2>
        </div>
        <form class="mt-8 space-y-6" @submit.prevent="handleRegister">
          <div class="space-y-4">
            <div class="input-group">
              <input
                v-model="formData.username"
                type="text"
                required
                placeholder="用户名"
                class="text-center"
              />
            </div>
            <div class="input-group">
              <input
                v-model="formData.password"
                type="password"
                required
                placeholder="密码"
                class="text-center"
              />
            </div>
            <div class="input-group">
              <input
                v-model="formData.confirmPassword"
                type="password"
                required
                placeholder="确认密码"
                class="text-center"
              />
            </div>
            <div class="input-group">
              <input
                v-model="formData.email"
                type="email"
                required
                placeholder="电子邮箱"
                class="text-center"
              />
            </div>
          </div>

          <div>
            <button
              type="submit"
              class="btn-primary group relative w-full flex justify-center py-3 px-4 border border-transparent text-lg font-medium rounded-lg text-white focus:outline-none"
              :disabled="loading"
            >
              <i class="fas fa-user-plus mr-2"></i>
              {{ loading ? '注册中...' : '注册账号' }}
            </button>
          </div>

          <div class="text-center">
            <router-link
              to="/login"
              class="text-indigo-600 hover:text-indigo-500 font-medium"
            >
              已有账号？立即登录
            </router-link>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const formData = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: ''
})

const loading = ref(false)

const handleRegister = async () => {
  if (formData.password !== formData.confirmPassword) {
    alert('两次输入的密码不一致')
    return
  }

  try {
    loading.value = true
    await authStore.register({
      username: formData.username,
      password: formData.password,
      email: formData.email
    })
    alert('注册成功，请登录')
    router.push('/login')
  } catch (error) {
    alert(error.response?.data?.error || '注册失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.login-card {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  padding: 8rem;
}

.input-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.3s;
  background-color: #f8fafc;
  font-size: 1.25rem;
  text-align: center;
}

.input-group input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
  outline: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: all 0.3s;
  border: none;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style> 